import { computed, defineComponent, unref } from 'vue';
import './BaseSearch.less';
import type { CardListQuery } from '/@/api/gateruler/model/cardModel';
import type { CascaderOption } from 'vant/lib/cascader/types';
import { useVModels } from '@vueuse/core';
import { useOptions } from '/@/views/gateruler/hooks/useOptions';
import { includes, indexOf } from 'lodash-es';
import { Button, ConfigProvider, Icon, Popup } from 'vant';
import setting from '/@/settings/projectSetting';

export default defineComponent({
  name: 'BaseSearch',
  props: {
    show: {
      type: Boolean as PropType<boolean>,
      required: true,
      default: () => {
        return false;
      },
    },
    queryState: {
      type: Object as PropType<CardListQuery>,
      required: true,
    },
    // 是否为组牌使用的筛选项
    isDeck: {
      type: Boolean as PropType<boolean>,
      default: () => {
        return false;
      },
    },
  },
  emits: ['openSeriesPopup', 'openAttrsPopup', 'update:show', 'pageRefresh'],
  setup(props, { emit }) {
    const { show } = useVModels(props, emit);

    const { classOptions, categoryOptions, rarityOptions, legionOptions, levelOptions, abilityOptions } = useOptions();

    // 打开筛选系列浮层
    const openSeries = () => {
      emit('openSeriesPopup');
    };
    const seriesNums = computed(() => {
      const { queryState } = props;
      if (queryState.series_id?.length) {
        return `已选系列(${queryState.series_id?.length})`;
      }
      return '全部系列';
    });
    // 打开属性筛选浮层
    const openAttrs = () => {
      emit('openAttrsPopup');
    };
    const attrsNums = computed(() => {
      const { queryState } = props;
      if (queryState.attrs?.length) {
        return `已选属性(${queryState.attrs?.length})`;
      }
      return '全部属性';
    });

    // 筛选
    const emptyClick = () => {
      const { queryState } = props;
      queryState.series_id = [];
      queryState.card_class = [];
      queryState.card_category = [];
      queryState.rarity = [];
      queryState.legion = [];
      queryState.level = [];
      queryState.ability = [];
      queryState.attrs = [];
      emit('pageRefresh');
    };
    type keyType = keyof Pick<
      CardListQuery,
      'card_class' | 'card_category' | 'rarity' | 'legion' | 'level' | 'ability'
    >;
    const multipleClick = (item: CascaderOption, key: keyType) => {
      const { queryState } = props;
      const selectValue = item.value as string;
      if (includes(queryState[key], selectValue)) {
        const index = indexOf(queryState[key], selectValue);
        queryState[key]?.splice(index, 1);
      } else {
        queryState[key]?.push(selectValue);
      }
      emit('pageRefresh');
    };

    return () => (
      <Popup
        v-model={[show.value, 'show']}
        position={'right'}
        style={{ width: '76%', height: '100%', zIndex: setting.PageTitleZIndex - 2 }}
        overlayStyle={{ zIndex: setting.PageTitleZIndex - 2 }}
        class={'gateruler-basequery-popup'}
        teleport={'body'}
      >
        <div class='search-container'>
          <div class='title'>
            <ConfigProvider
              themeVars={{
                buttonBorderWidth: 0,
                buttonDefaultColor: '#1380F0',
              }}
              class={'flex items-center'}
            >
              <span class={'text-base font-bold mr-lg'}>条件筛选</span>

              <Button icon={'replay'} size={'mini'} class={'text-red-500'} onClick={emptyClick}>
                清空筛选项
              </Button>
            </ConfigProvider>
          </div>
          <div class='filter-box'>
            <span class={'block text-gray-500 tracking-28px'}>系列</span>
            <div
              class={`series-attrs-box inline-block align-middle ${props.queryState.series_id?.length ? 'active' : ''}`}
              onClick={openSeries}
            >
              <span>{unref(seriesNums)}</span>
              <Icon name='arrow-down' />
            </div>
          </div>
          <div class='filter-box'>
            <span class={'block text-gray-500 tracking-28px'}>类别</span>
            <ul class={'box-list flex flex-wrap'}>
              {classOptions.map((item) => {
                return (
                  <li
                    class={includes(props.queryState.card_class, item.value) ? 'box-item active' : 'box-item'}
                    onClick={() => {
                      multipleClick(item, 'card_class');
                    }}
                  >
                    {item.label}
                  </li>
                );
              })}
            </ul>
          </div>
          <div class='filter-box'>
            <span class={'block text-gray-500 tracking-28px'}>类型</span>
            <ul class={'box-list flex flex-wrap'}>
              {categoryOptions.map((item) => {
                if (item.value === categoryOptions[3].value && props.isDeck) {
                  return null;
                }
                return (
                  <li
                    class={includes(props.queryState.card_category, item.value) ? 'box-item active' : 'box-item'}
                    onClick={() => {
                      multipleClick(item, 'card_category');
                    }}
                  >
                    {item.label}
                  </li>
                );
              })}
            </ul>
          </div>
          <div class='filter-box'>
            <span class={'block text-gray-500 tracking-28px'}>星级</span>
            <ul class={'box-list flex flex-wrap'}>
              {rarityOptions.map((item) => {
                return (
                  <li
                    class={includes(props.queryState.rarity, item.value) ? 'box-item active' : 'box-item'}
                    onClick={() => {
                      multipleClick(item, 'rarity');
                    }}
                  >
                    {item.label}
                  </li>
                );
              })}
            </ul>
          </div>
          <div class='filter-box'>
            <span class={'block text-gray-500 tracking-28px !mb-0'}>军团</span>
            <ul class={'legion-list flex flex-wrap'}>
              {legionOptions.map((item) => {
                return (
                  <li
                    class={`legion-item ${includes(props.queryState.legion, item.value) ? 'active' : ''}`}
                    onClick={() => {
                      multipleClick(item, 'legion');
                    }}
                  >
                    <div class={'legion-image'}>
                      <img src={`${setting.imgUrlCdn}card-tools/yingdiimg/gateruler/card/${item.label}.png`} alt='' />
                    </div>
                    <span class={'block text-xs text-center'}>{item.value}</span>
                  </li>
                );
              })}
            </ul>
          </div>
          <div class='filter-box'>
            <span class={'block text-gray-500 tracking-28px'}>等级</span>
            <ul class={'box-list level-list flex flex-wrap'}>
              {levelOptions.map((item) => {
                return (
                  <li
                    class={includes(props.queryState.level, item.value) ? 'box-item active' : 'box-item'}
                    onClick={() => {
                      multipleClick(item, 'level');
                    }}
                  >
                    {item.label}
                  </li>
                );
              })}
            </ul>
          </div>
          <div class='filter-box'>
            <span class={'block text-gray-500 tracking-28px'}>能力</span>
            <ul class={'box-list flex flex-wrap'}>
              {abilityOptions.map((item) => {
                return (
                  <li
                    class={includes(props.queryState.ability, item.value) ? 'box-item active' : 'box-item'}
                    onClick={() => {
                      multipleClick(item, 'ability');
                    }}
                  >
                    {item.label}
                  </li>
                );
              })}
            </ul>
          </div>
          <div class='filter-box'>
            <span class={'block text-gray-500 tracking-28px'}>属性</span>
            <div
              class={`series-attrs-box inline-block align-middle ${props.queryState.attrs?.length ? 'active' : ''}`}
              onClick={openAttrs}
            >
              <span>{unref(attrsNums)}</span>
              <Icon name='arrow-down' />
            </div>
          </div>
        </div>
      </Popup>
    );
  },
});
